<template>
  <div class="cities">
    <header>
      <van-nav-bar title="选择城市" left-arrow @click-left="onClickLeft" />
    </header>
    <div class="now">当前城市</div>
    <van-button
      type="default"
      color="#f8f8f8"
      class="nowcity"
      @click="chose"
      :text="state.city"
    ></van-button>
    <div class="all">热门城市</div>
    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >上海</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >北京</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >深圳</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >杭州</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >南京</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >杭州</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >苏州</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >广州</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >重庆</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >成都</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >大连</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >天津</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >西安</van-button
        >
      </van-grid-item>
      <van-grid-item>
        <van-button type="default" color="#f8f8f8" @click="chose"
          >郑州</van-button
        >
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { onMounted, reactive } from "vue";

export default {
  setup() {
    const onClickLeft = () => router.push("/home/index");
    const router = useRouter();
    const route = useRoute();

    const state = reactive({
      city: "杭州",
    });

    const chose = (el) => {
      router.push({
        path: "/home/index",
        query: { city: el.target.outerText },
      });
      console.log(route);
    };
    onMounted(() => {
      if (route.query.city && route.query.city != "") {
        state.city = route.query.city;
      }
    });
    return {
      onClickLeft,
      chose,
      state,
    };
  },
};
</script>

<style lang="less">
.cities {
  background: #fff;
  font-size: 16px;
  height: 100%;
  padding-bottom: 325px;
  .van-nav-bar__content {
    background: #ee3943;
    .van-icon-arrow-left:before {
      color: #fff;
    }
    .van-nav-bar__title {
      color: #fff;
    }
  }
  .now {
    margin-bottom: 10px;
    margin-top: 20px;
    margin-left: 16px;
  }
  .nowcity {
    margin-left: 9px;
  }
  .van-button {
    height: 35px;
    width: 75px;
  }
  .van-button__text {
    color: black;
  }
  .all {
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: 16px;
  }
  .van-grid-item__content {
    padding: 5px 0;
  }
  .van-grid-item {
    width: 90px;
  }
}
</style>
